<template>
  <Card :title="'Redis' + t('服务参数')" :loading="loading">
    <Row style="width: 100%" :gutter="[20, 20]">
      <Col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="12"
        :xl="6"
        :xxl="4"
        v-for="item in redisInfo"
        :key="item.attrName"
      >
        <Card :title="item.attrName" hoverable>
          <div class="redis-attr">
            <div class="redis-attr-item" v-for="attr in item.infos" :key="attr.label"
              ><span class="redis-attr-item-label">{{ attr.label }}</span
              >:<span class="redis-attr-item-value">{{ attr.value }}</span></div
            >
          </div>
        </Card></Col
      >
    </Row>
  </Card>
</template>

<script setup lang="ts">
  import { Card, Row, Col } from 'ant-design-vue';
  import { getRedisInfo } from '@/api/sys/redisMonitorManage';
  import { ref, onMounted, onBeforeMount } from 'vue';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  interface RedisInfo {
    attrName: string;
    infos: Array<RedisAttr>;
  }
  interface RedisAttr {
    label: string;
    value: string;
  }
  let redisInfo = ref<RedisInfo[]>();
  let loading = ref<Boolean>(true);
  const getData = () => {
    getRedisInfo().then((res) => {
      redisInfo.value = res as unknown as [RedisInfo];
      loading.value = false;
    });
  };
  // let interval: NodeJS.Timer;
  onMounted(() => {
    // interval = setInterval(() => {
    getData();
    // }, 5000);
  });
  onBeforeMount(() => {
    // clearInterval(Number(interval));
  });
</script>

<style lang="less" scoped>
  .redis-attr {
    height: 400px;
    overflow-y: scroll;
    &-item {
      &-label {
        font-weight: bold;
      }
    }
  }
</style>
